.rectangle-small{
	position: relative;
	left: 15px;
	top: -50px;
	font-size: 9px;
	color: #969696;
	font-family: 'Microsoft YaHei', sans-serif; /* 指定微软雅黑字体 */
}
.rectangle-text{
	 position: relative; 
	 left: 75px;
	 top: -70px;
	 font-size: 16px;
	 font-family: 'Microsoft YaHei', sans-serif; /* 指定微软雅黑字体 */	
}
.rectangle image{
	align-items: center; /* 垂直居中 */
	margin: 30px 20px;
}
.circle-image {
    width: 42px; /* 根据图标大小调整 */
    height: 42px; /* 根据图标大小调整 */
    margin-right: 10px; /* 图标和文字之间的间距 */
    border-radius: 50%; /* 将图片裁剪成圆形 */
    border: 1px solid #cbc0bb; /* 添加边框，并设置边框的宽度和颜色 */
    object-fit: cover; /* 确保图片内容在裁剪后仍然保持比例填充 */
    box-sizing: border-box; /* 包括边框和内边距在内的总尺寸计算 */
	display: flex;
	background-color: #ffffff; /* 可选：背景颜色 */
	padding: 5px;
}
.rounded-rectangle-container {
  /* 这个容器用于包含圆角矩形，并为其设置倒影效果的空间 */
  position: relative;
  width: 350px; /* 你可以根据需要调整宽度 */
  height: 200px; /* 你可以根据需要调整高度 */
  margin: 5px auto; /* 居中并设置外边距 */
}
 
.rounded-rectangle {
  /* 圆角矩形的样式 */
  width: 100%;
  height: 100%;
/*  background: linear-gradient(to right, rgba(255, 145, 10, 1.0), rgba(255, 210, 137, 0.0)); */
  background-image: url('https://image.ff5630.com/17371959553148290kGYowLRziT5i1a8e9defc44ff3f1ad2ba64fc3ab58bf.png');
  background-size: 100% 100%;
  border-radius: 10px; /* 圆角半径 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  color: white; /* 文字颜色 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  text-align: center; /* 文字居中 */
  position: relative; /* 为了定位倒影 */
  z-index: 1; /* 确保它在倒影之上 */
}
 
/* 翻转倒影效果 */
.rounded-rectangle::after {
}
.centered-div {
	position: relative;
	top: 13px;
    /* 可选：设置一些额外的样式，如字体大小 */
    font-size: 12px;
    /* 如果需要背景色或其他样式，也可以在这里添加 */
	display: flex;
	color: #c3c0bf;
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	font-family: Arial, sans-serif; /* 可选：设置字体 */
}
.container {
  margin-top: 20px; /* 上间隔 */
  display: flex; /* 利用Flexbox布局使三个正方形横向排列 */
  justify-content: center; /* 水平居中 */
}
 
.square {
  width: 100px; /* 正方形宽度设为100px */
  height: 100px; /* 正方形高度设为100px，确保为正方形 */
  background-color: #ffffff; /* 背景颜色设为蓝色 */
  margin-right: 20px; /* 每个正方形右侧添加10px的外边距 */
  margin-bottom: 10px; /* 每个正方形底部添加10px的外边距（除了最后一排） */
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.1), -5px 0px 10px rgba(0, 0, 0, 0.1), 0px 5px 10px rgba(0, 0, 0, 0.1); /* 添加左右及下边的阴影 */
  display: flex;
  flex-direction: column; /* 设置为列方向，以便图片和文字可以垂直堆叠 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 初始设置为水平居中，但可能需要调整以适应文字 */
  padding: 10px; /* 设置内边距 */
  box-sizing: border-box; /* 确保内边距和边框不会影响容器的总宽度和高度 */
  position: relative; /* 为了定位可能的文字或其他内容 */
}
 
/* 移除最后一个正方形的右侧外边距 */
.container .square:nth-child(3n) {
  margin-right: 0;
}
 
/* 如果仅有一行三个正方形，则无需移除任何正方形的右侧外边距；
   但如果有多行，您可能需要为每行的最后一个正方形设置特定的类或使用其他选择器来移除其右侧外边距。
   上面的nth-child选择器假设每行恰好有三个正方形。如果布局不同，请相应调整。
   在此示例中，由于只展示了一行，所以此规则实际上并未生效，但保留以供多行布局参考。
*/
 
/* 可选：为容器添加一些内边距或外边距以提供空间 */
.container {
  padding: 10px;
}

.container2 {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: center; /* 水平居中 */
  gap: 20px; /* 元素之间的间隔设为10px（这将同时应用于水平和垂直方向，但我们可以稍后通过其他方式调整垂直间隔） */
  margin: 0 auto; /* 在父元素中居中容器（如果父元素有固定宽度） */
  padding: 20px 10px;
  min-width:340px;
  max-width: 700px;
}

 
.rectangle {
  width: 160px; /* 长方形的宽度 */
  height: 100px; /* 长方形的高度 */
  background-color: #ffffff; /* 背景颜色设为蓝色 */
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), -5px 0px 10px rgba(0, 0, 0, 0.1), 0px 5px 20px rgba(0, 0, 0, 0.2); /* 添加左右及下边的阴影 */
  /* 由于我们使用了gap属性来设置元素之间的间隔，所以不需要额外的margin来创建间隔 */
}

  
 .avatar-container {
	 position: absolute; /* 使用绝对定位 */
	 top: 30px; /* 距离顶部0px */
	 left: 30px; /* 距离左侧0px */
     width: 56px; /* 头像容器宽度，包括边框 */
     height: 56px; /* 头像容器高度，包括边框 */
 }
  
 .avatar-border {
     content: "";
     position: absolute;
     top: -4px; /* 边框上外边距，用于创建外部边框效果 */
     left: -4px; /* 边框左外边距 */
     right: -4px; /* 边框右外边距 */
     bottom: -4px; /* 边框下外边距 */
     border-radius: 50%; /* 圆形边框 */
     border: 1px solid #eaeaea; /* 边框颜色和宽度 */
     /* pointer-events: none; */ /* 使边框不影响点击事件 */
 }
  
 .avatar-background {
     width: 100%;
     height: 100%;
     border-radius: 50%; /* 圆形背景 */
     background-color: #ffa81c; /* 背景颜色 */
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .avatar-background image{
     width: 70%;
     height: 70%;
     border-radius: 50%; /* 圆形背景 */
     display: flex;
     justify-content: center;
     align-items: center;
 }
  
 .avatar-icon {
     width: 100%;
     height: 100%;
     max-width: 40px; /* SVG图标的最大宽度，以适应背景大小 */
     max-height: 40px; /* SVG图标的最大高度 */
     fill: #333; /* 图标颜色 */
 }
.pict {
    max-width: 50%;
    max-height: calc(100% - 40px); /* 减去文字的高度和可能的内边距 */
    object-fit: contain;
	justify-content: center; /* 水平居中 */
}
.square:first-of-type .pict{
    max-width: 55%;
    max-height: calc(100% - 35px); /* 减去文字的高度和可能的内边距 */
    object-fit: contain;
	justify-content: center; /* 水平居中 */
}
